<template>
  <div class="top">
    <div class="top_left">
      <a-icon
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="toggleCollapse"
      />
    </div>
    <div class="top_right">
      <a-dropdown>
        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
          <a-icon slot="icon" type="user" />欢迎您： {{ userInfo.title }}
        </a>
        <a-menu slot="overlay" @click="onClick">
          <a-menu-item v-for="item in dropList" :key="item.url">
            {{ item.title }}
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <a-button icon="logout" class="loginout" @click="loginout">退出登录</a-button>
    </div>
  </div>
</template>

<script>
// import { getInfo } from "@/api/login";  

export default {
  data() {
    return {
      prop: ['collapsed'],
      collapsed: this.collapsed,
      userInfo: {},
      dropList: [
        { title: "个人中心", url: "/userInfo" },
        { title: "账户设置", url: "/ccc" },
        { title: "密码修改", url: "/ddd" },
      ],
    };
  },
  created() {
    this.init();
  },
  methods: {
     toggleCollapse () {
      this.collapsed = !this.collapsed;
      this.$emit('toggleCollapse',this.collapsed)
    },
    init() {
      let par = {
        uid: "32953014",
      };
      // getInfo(par)
      //   .then((res) => {
      //     console.log(res.data.profileVillageInfo);
      //     this.userInfo = res.data.profileVillageInfo;
      //   })
      //   .catch((err) => {
      //     console.log(err);
      //   });
    },
    onClick({ key }) {
      console.log(`Click on item ${key}`, { key });
      this.$router.push({
        path: `${key}`,
      });
    },
    loginout() {
      console.log('退出')
      sessionStorage.clear();
      this.$router.push('/login')
    }
  },
};
</script>

<style scoped>
.top {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  /* .top_left {

  } */
}
.trigger{
  color: #1890ff;
  /* margin-left: 60px; */
}
.loginout {
  margin-left: 15px;
  background-color: rgb(0 21 41);
  color: #1890ff;
  border: seashell;
}
.loginout:hover {
  background-color: #dbd6d6;
}
</style>